let canvas = document.createElement("canvas");
canvas.width = 400;
canvas.height = 400;
document.body.append(canvas);
let ctx = canvas.getContext("2d");
//基本状态设置（设置原点位置)
ctx.save();
ctx.translate(200, 200);

//绘制表盘
//1. 绘制表的圆盘
//   设置状态
ctx.save();
ctx.fillStyle = "#fff";
//  绘制圆
ctx.beginPath();
ctx.arc(0, 0, 180, 0, Math.PI * 2);
ctx.fill();
ctx.restore();

//2.绘制小时刻度
ctx.save();
ctx.lineWidth = 8 ;
for(let i=0;i<12;i++){
    ctx.beginPath();
    ctx.moveTo(0,-180);
    ctx.lineTo(0,-160);
    ctx.stroke();
    ctx.rotate(Math.PI * 2 / 12) ;
}
ctx.restore();

//3.绘制分钟刻度
ctx.save();
ctx.lineWidth = 2 ;
for(let i = 0;i<60;i++){
    ctx.beginPath();
    ctx.moveTo(0,-180);
    ctx.lineTo(0,-170);
    ctx.stroke();
    ctx.rotate(Math.PI * 2 / 60);
}
ctx.restore();

//4.绘制圆心点
ctx.beginPath();
ctx.arc(0,0,6,0,Math.PI*2);
ctx.fill();




//绘制文字
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle' ;
ctx.font = '20px sans-serif' ;
const r = 140 ;
const angle = 360/12 ;
const startPoint = {x:0,y:-r};
for(let i=0;i<12;i++){
    const text = i%12 == 0 ? 12 : i%12 ;
    const currAngle = i * angle ;
    x = Math.sin(currAngle * Math.PI / 180) * r ;
    y = Math.cos(currAngle * Math.PI / 180) * r
    ctx.fillText(text,x,-y);
}
ctx.restore();


canvas = document.createElement("canvas");
canvas.width = 400;
canvas.height = 400;
document.body.append(canvas);
ctx = canvas.getContext("2d");
ctx.save();
ctx.translate(200, 200);
(function draw(){
    ctx.clearRect(-200,-200,400,400);
    //绘制表针
    //1 获得当前时间
    const now = new Date();
    const hour = now.getHours();
    const minute = now.getMinutes() ;
    const second = now.getSeconds() ;
    console.log(hour,minute,second);

    //4 绘制时针
    ctx.save();
    ctx.beginPath();
    ctx.rotate((hour%12 * 3600 + minute*60 + second) * 2 * Math.PI / (12 * 3600)) ;
    ctx.moveTo(-3,-80);
    ctx.quadraticCurveTo(-10,-80,0,-100);
    ctx.quadraticCurveTo(10,-80,3,-80);
    ctx.lineTo(3,10);
    ctx.lineTo(-3,10);
    ctx.closePath();
    ctx.fill();
    ctx.restore();

    //3 绘制分针， 60分钟 3600s
    ctx.save();
    ctx.beginPath();
    ctx.rotate((second + minute*60) * 2*Math.PI / 3600)
    ctx.lineCap = 'round' ;
    ctx.lineWidth = 4 ;
    ctx.strokeStyle = '#666';
    ctx.moveTo(0,-160);
    ctx.lineTo(0,15);
    ctx.stroke();
    ctx.restore();


    //2 绘制秒针
    ctx.save();
    ctx.beginPath();
    ctx.rotate(second * 2*Math.PI / 60)
    ctx.lineCap = 'round' ;
    ctx.strokeStyle = '#f00';
    ctx.moveTo(0,-180);
    ctx.lineTo(0,20);
    ctx.stroke();
    ctx.restore();

    setTimeout(draw, 1000);
})();
